<template>
  <footer class="footer">
    <div class="footer-container">
      <div class="footer-container__main">
        <h4>{{ langConfig.link.name }}</h4>
        <a
          :href="item.url ? item.url : null"
          class="footer-container__main--link"
          target="_blank"
          v-for="(item, id) of langConfig.link.content"
          :key="id"
          >{{ item.name }}</a
        >
      </div>
      <div class="footer-container__main">
        <h4>{{ langConfig.community.name }}</h4>
        <a
          class="footer-container__main--link"
          target="_blank"
          :href="item.url ? item.url : null"
          v-for="(item, id) of langConfig.community.content"
          :key="id"
          >{{ item.name }}</a
        >
      </div>
      <div class="footer-container__social">
        <p class="footer-social-title">Robert-ui {{ version }} Fullerene</p>
        <i class="doc-icon-weixin elementdoc"></i>
        <a href="https://github.com/elemefe" target="_blank">
          <i class="doc-icon-github elementdoc"></i>
        </a>
        <a target="_blank">
          <i class="doc-icon-gitter elementdoc"></i>
        </a>
      </div>
    </div>
  </footer>
</template>

<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'
import compoLang from '../router/component.json'
import { version } from '../../package.json'

@Component
export default class Footer extends Vue {
  version = version
  get lang(): string {
    return this.$route.path.split('/')[1] || 'zh-CN'
  }
  get langConfig(): string {
    const compoLang_s: any = compoLang
    return compoLang_s.filter((config: any) => {
      return config.lang === this.lang
    })[0]['footer']
  }
}
</script>

<style lang="scss">
.footer {
  background-color: #f7fbfd;
  width: 100%;
  padding: 40px 150px;
  box-sizing: border-box;
  height: 340px;
  .footer-container {
    box-sizing: border-box;
    width: auto;
  }
  .footer-container__main {
    font-size: 0;
    display: inline-block;
    vertical-align: top;
    margin-right: 110px;
    h4 {
      font-size: 18px;
      color: #333;
      line-height: 1;
      margin: 0 0 15px 0;
    }

    .footer-container__main--link {
      display: block;
      margin: 0;
      line-height: 2;
      font-size: 14px;
      color: #666;

      &:hover {
        color: #333;
      }
    }
  }
  .footer-container__social {
    float: right;
    text-align: right;
  }
}
@media (max-width: 1140px) {
  .footer {
    height: auto;
  }
}

@media (max-width: 1000px) {
  .footer-container__social {
    display: none;
  }
}

@media (max-width: 768px) {
  .footer {
    .footer-container__main {
      margin-bottom: 30px;
    }
  }
}
</style>
